
<template>
  <div>
    <van-nav-bar
      title="30天减肥运动计划"
      left-text="返回"
      left-arrow
      @click="onClickLeft"
    />

    <div class="weight">
      <div class="weg-img">
        <img src="../../assets/img/养成11.png" alt="" />
      </div>

      <van-tabs v-model:active="active">
        <van-tab title="介绍">
          <div class="weg">
            <div class="weg-box">
              <div class="weg-left"> • 难度系数:</div>
              <div class="weg-right">
                <van-icon name="star" />
                <van-icon name="star" />
              </div>
            </div>

            <div class="weg-box">
              <div class="weg-left"> • 适用人群:</div>
              <div class="weg-right">超重或肥胖人群，久坐族</div>
            </div>

            <div class="weg-box">
              <div class="weg-left"> • 预期效果:</div>
              <div class="weg-right">减脂2-3斤</div>
            </div>

            <div class="weg-text">
              <div class="weg-text-title">
                嘿胖砸！说你呢！我等你很久了！
              </div>
              <div class="weg-text-title">
                可能你已经试了各种“神奇的”减肥方案，都是自虐吧，都失败了吧，都反弹了吧，告诉你，所有不需要运动的减肥方法都是耍流氓！
              </div>
              <div class="weg-text-title">
                这是一套一点儿都不神奇，然而健康科学有卵用的减肥方案，我们通过有氧运动帮你消耗脂肪，无氧运动改善基础代谢，减肥成功不反弹，并每天戳破一条减肥谣言来帮助你树立科学正确的减肥观念。
              </div>
               <div class="weg-text-title">
                说那么多也是废话，不要小看这些不起眼的小任务呦，如果你每天都坚持完成，最后形成习惯，你收获的将不仅仅是匀称的身材，你的肌肉耐力、柔韧性、心肺、循环和消化系统功能都将得到全方位改善。
              </div>
              <div class="text-te">特别提示：</div>
              <div class="weg-text-title">
                • 为了更好的效果，建议配合【减肥饮食方案】执行。
              </div>
               <div class="weg-text-title">
                • 如果你不方便外出，或者赶上恶劣天气，可以试试订阅我们的【宅家运动计划】，看着电视也能锻炼身体呦！
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="目标">内容 2</van-tab>
      </van-tabs>
    </div>
  </div>
</template>
  
<script setup lang='ts'>
import { ref } from 'vue'

const active = ref(0)

const onClickLeft = () => history.back()
</script>




<style lang="scss" scoped>
.weight {
  width: 100%;
  height: 100%;
  // background-color: yellow;
  .weg-img {
    width: 100%;
    height: 150px;
    img {
      width: 100%;
      height: 100%;
    }
  }

  .weg{
    .weg-box {
      width: 100%;
      height: 50px;
    }

    .weg-left {
      float: left;
      height: 40px;
      width: 30%;
      // background-color: blue;
      text-align: center;
      padding-top: 10px;
    }
    .weg-right {
      float: left;
      height: 40px;
      width: 70%;
      // background-color: rgb(24, 148, 96);
      text-align: left;
      padding-top: 10px;
    }

    .weg-text {
      width: 100%;
      padding: 10px;
      // line-height: 30px;
      // background-color: pink;
      color: #666;

      .weg-text-title {
        line-height: 30px;
      }
      .text-te {
        color: red;
        font-weight: bold;
      }
    }
  }
}
</style>